<template>
  <div class="upload-img-copm">
    <span class="title">{{text}}</span>
    <div class="header-img">
      <input class="inp-img" type="file" name="file" @change="uploadImg" id="file_upload">
      <div class="camera-div-gai">
        <span class="icon-add">+</span>
      </div>
      <img id="preview" :src="imgUrl" alt="">
	  </div>
  </div>
</template>

<script>
import axios from 'axios'
import { HOST} from 'common/js/constdata.js'
export default {
  data() {
    return {
    }
  },
  props: {
    text: {
        type:String,
        default:''
    },
    imgUrl : {
      type:String,
      default:''
    }
  },
  methods: {
    uploadImg: function (e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)return;
      
      //去上传
      let file = e.target.files[0];           
      let param = new FormData(); //创建form对象
      param.append('file',file,file.name);//通过append向form对象添加数据
      param.append('uid',localStorage.getItem("uid"));//添加form表单中其他数据
      //console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      };  //添加请求头
      axios.post('/api/upload',param,config)
      .then(res=>{
        res = res.data;
        let result = res.result
        if(result == "success"){
          console.log(res.data.url);
          //设置头像img
          let $img = document.getElementById("preview");
          //var windowURL = window.URL || window.webkitURL;
          //var dataURL = windowURL.createObjectURL(files[0]);
          var imgurl = res.data.url;
          this.$emit('imgurl',imgurl);
          $img.src = imgurl;
          //$img.style.zIndex = 9;
        }
      })
      
    }
  }
}
</script>

<style lang="stylus">
.upload-img-copm
  background:#f5f5f9
  padding:10px
  .title
    font-size:16px
  .header-img
    height: 70px
    width: 70px
    border-radius: 35px
    margin: 10px 0
    position: relative
    .inp-img
      height: 70px
      width: 70px
      position: absolute
      top: 0
      left: 105px
      z-index: 10
      opacity: 0
    .camera-div-gai
      width: 70px
      height: 70px
      background-color: #fff
      text-align: center
      position: absolute
      top: 0
      left: 105px
      z-index: 1
      .icon-add
        display:block
        font-size:40px
        color:#9d9d9d
        margin-top:14px
    #preview
      width: 70px
      height: 70px
      position: absolute
      top: 0
      left: 105px
      z-index:9

</style>